<script setup lang="ts">
import { closeToast, showLoadingToast, FormInstance } from 'vant'

const formRef = ref<FormInstance>()

const value1 = ref('')
const value2 = ref('')
const value3 = ref('abc')
const value4 = ref('')
const pattern = /\d{6}/

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) => /1\d{10}/.test(val)

// 校验函数可以直接返回一段错误提示
const validatorMessage = (val: any) => `${val} 不合法，请重新输入`

// 校验函数可以返回 Promise，实现异步校验
const asyncValidator = (val: any): Promise<boolean> =>
  new Promise((resolve) => {
    showLoadingToast('验证中...')

    setTimeout(() => {
      closeToast()
      resolve(val === '1234')
    }, 1000)
  })

const onFailed = (errorInfo: { values: object; errors: any[] }) => {
  console.log('failed', errorInfo)
  if (errorInfo.errors[0] && errorInfo.errors[0].name) {
    formRef.value?.scrollToField(errorInfo.errors[0].name, true)
  }
}

const result = ref('')
const showPicker = ref(false)
const columns = [
  { text: '杭州', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' },
]

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text
  showPicker.value = false
}

const fileList = ref([])

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file)

  console.log(
    '%c [v-model="fileList"  ]-57',
    'font-size:13px; background:pink; color:#bf2c9f;',
    fileList
  )
}
</script>

<template>
  <div>
    <van-form @failed="onFailed" ref="formRef">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          label="选择器1"
          v-model="value1"
          name="pattern"
          placeholder="正则校验"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />
        <!-- 通过 validator 进行函数校验 -->
        <van-field
          label="选择器2"
          v-model="value2"
          name="validator"
          placeholder="函数校验"
          :rules="[{ validator, message: '请输入正确内容' }]"
        />
        <!-- 通过 validator 返回错误提示 -->
        <van-field
          label="选择器3"
          v-model="value3"
          name="validatorMessage"
          placeholder="校验函数返回错误提示"
          :rules="[{ validator: validatorMessage }]"
        />
        <!-- 通过 validator 进行异步函数校验 -->
        <van-field
          label="选择器4"
          v-model="value4"
          name="asyncValidator"
          placeholder="异步函数校验"
          :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
        />

        <van-field
          v-model="result"
          is-link
          readonly
          name="picker"
          label="选择器"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>

        <van-field is-link readonly name="upload" label="选择器">
          <template #input>
            <!-- <van-uploader v-model="fileList" multiple :max-count="2" /> -->
            <van-uploader
              v-model="fileList"
              accept=".pdf,.docx"
              multiple
              :after-read="afterRead"
            >
              <van-button icon="plus" type="primary">上传文件</van-button>
            </van-uploader>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="scss" scoped></style>
